import {
    Box,
    CircularProgress,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Typography
} from '@mui/material';
import { format } from 'date-fns';
import { useRouter } from 'next/router';
import React, { useCallback } from 'react';

import Disbursement from '../../../api/disbursement/disbursement';
import NumberTool from '../../../libs/number-tool';
import { getTokenIcon } from '../../../libs/utilities';
import DisbursementStatus from '../../disbursement-status';
import GFSTable from './gfs-table';

const DisbursementTable = (props) => {
    const router = useRouter();
    const { pageLoading, items, error, loading, hasNextPage, sentryRef } = props;

    const getErrorMessage = useCallback(
        (error: { code: number; message: string }) => {
            return error.message;
        },
        [items]
    );

    return (
        <>
            {pageLoading ? (
                <Typography variant="h6" color="white">
                    Loading...
                </Typography>
            ) : (
                <Box sx={{ pb: 4 }}>
                    {!error ? (
                        <>
                            {items?.length > 0 && (
                                <GFSTable>
                                    <Table sx={{ minWidth: 650 }} aria-label="Disbursement List">
                                        <TableHead>
                                            <TableRow>
                                                <TableCell align="center">Date</TableCell>
                                                <TableCell>Title</TableCell>
                                                <TableCell>Amount</TableCell>
                                                <TableCell align="center">Status</TableCell>
                                            </TableRow>
                                        </TableHead>
                                        <TableBody>
                                            {items.map((row) => (
                                                <TableRow
                                                    key={row.id}
                                                    sx={{
                                                        '&:last-child td, &:last-child th': {
                                                            border: 0
                                                        }
                                                    }}
                                                    hover={true}
                                                    onClick={() =>
                                                        router.push(`/transactions/${row.id}`)
                                                    }
                                                >
                                                    <TableCell align="center">
                                                        {row.timestamp_last_saved &&
                                                            format(
                                                                row.timestamp_last_saved,
                                                                'MM / dd / yyyy'
                                                            )}
                                                    </TableCell>
                                                    <TableCell>{row.title}</TableCell>
                                                    <TableCell>
                                                        <Box
                                                            component="img"
                                                            sx={{
                                                                height: 15,
                                                                width: 15,
                                                                marginRight: '0.5rem'
                                                            }}
                                                            alt="Icon"
                                                            src={getTokenIcon(row.currency)}
                                                        />
                                                        {NumberTool.format(
                                                            row.total_amount,
                                                            row.currency,
                                                            2
                                                        )}{' '}
                                                        {row.currency}
                                                    </TableCell>
                                                    <TableCell align="center">
                                                        <DisbursementStatus
                                                            disbursement={Disbursement.fromJSON(
                                                                row
                                                            )}
                                                        />
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </GFSTable>
                            )}
                            {!loading && (!items || !items.length) && (
                                <Typography className="text-white mt-4">
                                    No disbursements yet...
                                </Typography>
                            )}
                            {sentryRef && (loading || hasNextPage) && (
                                <Box
                                    display="flex"
                                    justifyContent="center"
                                    alignItems="center"
                                    sx={{ pt: 4 }}
                                >
                                    <CircularProgress ref={sentryRef} sx={{ color: '#ffffff' }} />
                                </Box>
                            )}
                        </>
                    ) : error?.message ? (
                        <Typography className="mt-4" sx={{ color: 'var(--color-negative)' }}>
                            {getErrorMessage(error)}
                        </Typography>
                    ) : (
                        <Typography className="text-white mt-4">No disbursements yet...</Typography>
                    )}
                </Box>
            )}
        </>
    );
};

export default DisbursementTable;
